<!-- components/Account.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <CustomNavbar title="支付订单"/> -->
		<view class="content">
			<view class="success">
				<image src="/orderPages/static/success.png" mode=""></image>
				<text>付款成功</text>
			</view>
			<button class="btn" @click="lookOrder">查看订单</button>
			<button class="btn to-index" @click="toIndex">返回首页</button>
		</view>
		
	</view>
</template>

<script setup>
	import {ref,reactive, computed, onMounted, onUnmounted} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	
	
	// 查看订单
	const lookOrder = ()=>{
		uni.navigateTo({
			url:'/orderPages/pages/order/my-order'
		})
	}
	// 返回首页
	const toIndex = ()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	
</script>

<style lang="scss" scoped>
	.container {
		
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 8rpx;
		padding-bottom: 80rpx;
		/* 导航栏高度 */
		.content{
			// 支付信息
			margin: 20rpx;
			border-radius: 26rpx;
			background-color: #fff;
			padding-top: 164rpx;
			height: 1391rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-flow: column;
			.success{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #2D2E37;
				font-size: 36rpx;
				margin-bottom: 119rpx;
				image{
					width: 327rpx;
					height: 230rpx;
					margin-bottom: 15rpx;
				}
			}
			// 确认
			button{
				width: 460rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				background: linear-gradient(to right,#FF5A55,#FD3832);
				color: #fff;
				margin: 0 auto 29rpx;
				&::after{
					border: none !important;
				}
				&.to-index{
					background: #E5E9EE;
					color: #9FA3A9;
				}
				
			}
		}
	}
</style>